<template>
    <header class="header">
      <div class="brand-logo">
        <img src="/favicon.ico" alt="Logo" class="logo" />
        <span class="app-name">Redis Manager</span>
      </div>
      <nav class="navigation">
        <router-link to="/">首页</router-link>
        <router-link to="/data-query">数据查询</router-link>
        <router-link to="/data-management">数据管理</router-link>
        <router-link to="/monitoring">监控</router-link>
        <router-link to="/backup-and-restore">备份与恢复</router-link>
      </nav>
      <div class="user-info">
        <span class="username">User: {{ username }}</span>
        <!-- <img src="@/assets/user-avatar.png" alt="User Avatar" class="avatar" /> -->
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            More <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>账户设置</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
  </template>
  
  <script setup lang="ts">
  import { useRouter } from 'vue-router';
  
  const username = 'John Doe';
  const router = useRouter();
  
  const handleLogout = () => {
    alert('您已成功退出登录！');
    router.push('/login');
  };
  </script>
  
  <style scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f9fa;
  }
  
  .brand-logo {
    display: flex;
    align-items: center;
  }
  
  .logo {
    width: 30px;
    margin-right: 10px;
  }
  
  .app-name {
    font-weight: bold;
  }
  
  .navigation {
    display: flex;
    gap: 10px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .username {
    font-weight: bold;
  }
  
  .avatar {
    width: 30px;
    border-radius: 50%;
  }
  </style>